<!doctype html>
<html>
	<head>
		<script type="text/javascript" src="../Aero.js"></script>
		<style>
			body {
				margin:0;
				padding:0;
				width:100%;
				font-family: Arial, sans-serif;
				font-size: 14px;
			}
			.unit {
				padding:2%;
				border-bottom:1px solid #666;
				box-shadow: 0 10px 10px #666;
			}
			h1 {
				margin: 0 0 15px 0;
				font-size: 20px;
			}
			iframe {
				width:96%;
				height:300px;
			}
			img {
				display:block;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
		var tests = {
				"test1": "Images and background image",
				"test2": "Multiple backgrounds",
				"test3": "Margin: auto",
				"test4": "Form controls",
				"test5": "Flash",
				"test6": "Java applet",
				"test7": "Canvas",
				"test8": "Iframe",
				"test9": "Borders",
				"test10": "Frameset",
				"test11": "Nested Frameset",
				"test12": "Frameset grid"
			},
			createUnit = function (test) {
				var container = document.createElement("div"),
					title = document.createElement("h1"),
					iframe = document.createElement("iframe"),
					button = document.createElement("button"),
					buttonSVG = document.createElement("button"),
					boxButton = document.createElement("button"),
					boxBlur = document.createElement("input"),
					time = document.createTextNode("");
				
				container.className = "unit";
				title.textContent = tests[test];
				iframe.src = test + ".html?" + (+new Date);
				button.textContent = "Screenshot";
				buttonSVG.textContent = "Screenshot SVG";
				boxButton.textContent = "Create Box";
				boxBlur.type = "range";
				boxBlur.max = 10;
				boxBlur.min = 0;
				boxBlur.value = 5;
				
				container.appendChild(title);
				container.appendChild(iframe);
				container.appendChild(button);
				container.appendChild(buttonSVG);
				container.appendChild(boxButton);
				container.appendChild(boxBlur);
				container.appendChild(time);
				
				button.onclick = function () {
					var start = +new Date();
					Aero.ScreenShot(iframe.contentDocument, function () {
						var elapsed = (+new Date) - start;
						time.textContent = " Time: " + elapsed + " ms";
						container.appendChild(this);
					});
				};
				
				buttonSVG.onclick = function () {
					var start = +new Date();
					Aero.ScreenShot(iframe.contentDocument, function (src) {
						var elapsed = (+new Date) - start;
						time.textContent = " Time: " + elapsed + " ms";
						var code = src.replace(/^.*?,/, ""),
							div = document.createElement("div");
						code = decodeURIComponent(escape(atob(code)));
						div.innerHTML = code;
						container.appendChild(div.firstChild);
					}, {passDataUri: true});
				};
				
				boxButton.onclick = function () {
					var box = createBox(iframe.contentDocument,function () {
							instance && instance.updatePosition();
						}),
						start = +new Date,
						instance = new Aero(box, {blur: boxBlur.value, ready: function () {
							var elapsed = (+new Date) - start;
							time.textContent = " Time: " + elapsed + " ms";
						}});
				};
				
				document.body.appendChild(container);
			},
			createBox = function (doc, onMove) {
				var el = doc.createElement("div"),
					pos = {x:0, y:0};
				el.style.cssText = "width:200px;height:200px;position:absolute;z-index:9999;border:1px solid black;border-radius:5px;";
				doc.body.appendChild(el);
				var prev = pos,
					track = false,
					move = function (e) {
						var cx = e.pageX || 0,
							cy = e.pageY || 0;
						pos.x += (cx - prev.x);
						pos.y += (cy - prev.y);
						el.style.top = pos.y + "px";
						el.style.left = pos.x + "px";
						prev = {x: cx, y: cy};
						onMove();
					};
				move(pos);
				doc.addEventListener("mousedown", function (e) {
					if (e.target !== el) return;
					track = true;
					e.preventDefault();
					prev = {x: e.pageX, y: e.pageY};
				});

				doc.addEventListener("mouseup", function (e) {
					track = false;
				});

				doc.addEventListener("mousemove", function (e) {
					track && move(e);
				});
				
				return el;
			};
			
		for (var i in tests) {
			createUnit(i);
		}
		</script>
	</body>
</html>